<template>
  <div :loading="loading">
    <div class="demo-input-suffix gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>项目选择</p>
          <el-select v-model="Api_GET_EventsManagementEventPoomsaeQO.CategoryId" size="mini" filterable placeholder="请选择项目" @change="changeCategory">
            <el-option v-for="item in categoryData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>组别选择</p>
          <el-select v-model="Api_GET_EventsManagementEventPoomsaeQO.GroupId" size="mini" filterable placeholder="请选择组别" @change="getTableData" @focus="judge">
            <el-option label="全部" value="" />
            <el-option v-for="item in eventData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :md="18" :lg="12">
          <p>级别选择</p>
          <el-tag v-for="(item, index) in Api_GET_EventsManagementEventPoomsaeQO.LongNames" :key="index" closable class="gl_mr_15 event_tag" @close="handleClose(index)">{{ item }}</el-tag>
          <el-input v-if="eventInputVisible" ref="tagInput" v-model="inputValue" class="gl_mr_15 tag_input" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
          <el-button v-else class="button-new-tag" size="mini" @click="showInput"> + </el-button>
        </el-col>
        <el-col :md="6" :lg="4" class="search_btn">
          <el-button type="primary" size="mini" @click="getTableData()">筛选</el-button>
          <el-button type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <p class="gl_mb_15">比赛项目明细</p>
    <div>
      <p>
        <el-button type="primary" size="mini" @click="clear">清空选中项</el-button>
        <el-button type="primary" size="mini" @click="setting">品势内容批量设置</el-button>
      </p>
      <el-table ref="table" :data="tableData" style="width: 100%" @selection-change="selectionChange">
        <el-table-column type="selection" />
        <el-table-column label="名称">
          <template slot-scope="{row}">
            <span>
              <span>{{ row.categoryName + ' ' + row.groupName + row.gender.name }}</span>
              <span>{{ row.eventName ? row.eventName : '' }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="groupName" label="组别" width="180" />
        <el-table-column prop="round" label="轮次" width="100">
          <template slot-scope="{row}">
            <span>{{ row.round == '1' ? '决赛' : row.round + '轮' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="roundPoomsaeSettings.poomsaeSettingNames" label="章节">
          <template slot-scope="{row}">
            <span v-for="(item, index) in row.roundPoomsaeSettings" :key="item.id">
              <span>{{ item.round == '1' ? '决赛：' : item.round + '轮：' }}</span>
              <span v-for="(jtem, jndex) in item.poomsaeSettingNames" :key="jndex">
                <span>{{ jtem }}</span>
                <span>{{ jndex != item.poomsaeSettingNames.length - 1 ? '，' : '' }}</span>
              </span>
              <span>{{ index != row.roundPoomsaeSettings.length - 1 ? '；' : '' }}</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <ChapterSetting :id="selection" ref="chapterSetting" :category-id="Api_GET_EventsManagementEventPoomsaeQO.CategoryId" :round="round" />
  </div>
</template>

<script>
import {
  Api_GET_EventsManagementEventPoomsaeQO,
  Api_GET_EventsManagementCategoryQO,
  SiSTKWEventsManagementEventIdListInput
} from '@/lib/form/game/swaggerForm';
import
{
  api_GET_EventsManagementEventPoomsae,
  api_GET_EventsManagementCategory,
  api_POST_EventsManagementEventClearPoomsae
} from '@/extend/api/gameswaggerApi/app';
import ChapterSetting from './chapterSetting';
export default {
  name: 'GameChapter',
  components: {
    ChapterSetting
  },
  data () {
    return {
      loading: false,
      categoryData: [], // 项目
      eventData: [],
      tableData: [],
      selection: [],
      selectionRow: [],
      round: 1,
      Api_GET_EventsManagementEventPoomsaeQO: new Api_GET_EventsManagementEventPoomsaeQO(),
      Api_GET_EventsManagementCategoryQO: new Api_GET_EventsManagementCategoryQO(),
      SiSTKWEventsManagementEventIdListInput: new SiSTKWEventsManagementEventIdListInput(),
      eventInputVisible: false,
      inputValue: ''
    };
  },
  created() {
    this.$set(this.Api_GET_EventsManagementEventPoomsaeQO, 'LongNames', []);
    this.getCate();
  },
  methods: {
    // 获取项目
    getCate() {
      this.loading = true;
      this.Api_GET_EventsManagementCategoryQO.CompetitionId = this.$route.params.id;
      this.Api_GET_EventsManagementCategoryQO.IncludeEventGroup = true;
      this.Api_GET_EventsManagementCategoryQO.EventTypeCode = 'NoneCompetitive';
      api_GET_EventsManagementCategory(this.Api_GET_EventsManagementCategoryQO).then(res => {
        this.categoryData = res.items;
        this.Api_GET_EventsManagementEventPoomsaeQO.CategoryId = this.categoryData[0].id;
        this.loading = false;
        this.changeCategory(this.Api_GET_EventsManagementEventPoomsaeQO.CategoryId);
      }).catch((error) => {
        this.loading = false;
        this.$message({ type: 'error', message: error.error.message || '获取数据失败' });
      });
    },
    // 清空选中项
    clear() {
      if (this.selection.length > 0) {
        this.SiSTKWEventsManagementEventIdListInput.eventsId = this.selection;
        api_POST_EventsManagementEventClearPoomsae(this.SiSTKWEventsManagementEventIdListInput).then(res => {
          this.$message({
            type: 'success',
            message: '已清空！'
          });
          this.getTableData();
        });
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择比赛项目！'
        });
      }
    },
    // 多选
    selectionChange(val) {
      const id = val.map(item => {
        return item.eventId;
      });
      this.selection = id;
      this.selectionRow = val;
    },
    // 获取表格数据
    getTableData() {
      var that = this;
      that.loading = true;
      that.Api_GET_EventsManagementEventPoomsaeQO.eventTypeCode = 'NoneCompetitive';
      that.Api_GET_EventsManagementEventPoomsaeQO.CompetitionId = that.$route.params.id;
      console.log(that.Api_GET_EventsManagementEventPoomsaeQO);
      api_GET_EventsManagementEventPoomsae(that.Api_GET_EventsManagementEventPoomsaeQO).then(res => {
        that.tableData = res;
        if (that.tableData.length > 0) {
          that.round = res[0].round ? res[0].round : res[1].round;
          // that.round = 2;
          that.round = Number(that.round);
        }
        that.loading = false;
      }).catch((error) => {
        that.loading = false;
        const _msg = error.message || error.error.message;
        that.$message({ type: 'error', message: _msg });
      });
    },
    // 获取组别
    changeCategory(id) {
      this.Api_GET_EventsManagementEventPoomsaeQO.GroupId = '';
      const groupData = this.categoryData.filter((item) => {
        return item.id === id;
      });
      this.eventData = groupData[0] ? groupData[0].eventGroups : [];
      this.getTableData();
    },
    // 批量设置品势内容
    setting() {
      // for (let i = 0; i < this.selectionRow.length; i++) {
      //   var row = this.selectionRow[i];
      //   if (row.poomsaeSettingNames.length > 0) {
      //     this.$message({
      //       type: 'warning',
      //       message: '[' + row.groupName + '] 已设置品势章节，重新设置需先清空！'
      //     });
      //     return false;
      //   }
      // }
      if (this.selection.length > 0) {
        this.$refs.chapterSetting.open();
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择比赛项目！'
        });
      }
    },
    // 先选项目，再选组别
    judge() {
      if (this.Api_GET_EventsManagementEventPoomsaeQO.CategoryId === '') {
        this.$message({
          type: 'warning',
          message: '请先选择项目！'
        });
      }
    },
    handleClose(index) {
      this.Api_GET_EventsManagementEventPoomsaeQO.LongNames.splice(index, 1);
      this.getTableData();
    },
    handleInputConfirm() {
      if (this.inputValue && this.Api_GET_EventsManagementEventPoomsaeQO.LongNames.indexOf(this.inputValue) === -1) {
        this.Api_GET_EventsManagementEventPoomsaeQO.LongNames.push(this.inputValue);
        this.getTableData();
      }
      this.eventInputVisible = false;
      this.inputValue = '';
    },
    showInput() {
      this.eventInputVisible = true;
      this.$nextTick(() => {
        this.$refs.tagInput.$refs.input.focus();
      });
    },
    reset() {
      this.Api_GET_EventsManagementEventPoomsaeQO.CategoryId = this.categoryData[0].id;
      this.Api_GET_EventsManagementEventPoomsaeQO.LongNames = [];
      this.changeCategory(this.Api_GET_EventsManagementEventPoomsaeQO.CategoryId);
    }
  }
};
</script>
<style  scoped>
.tag_input {
  display: inline-block;
  width: 100px;
}
.event_tag {
  height: 28px;
  line-height: 26px;
}
</style>
